<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 消息处理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane :label="`未读消息(${unread.length})`" name="first">
                    <el-table :data="unread" :show-header="false" style="width: 100%">
                        <el-table-column>
                            <template slot-scope="scope">
                                <span class="message-title">
<!--                                    点击标题，将该同志状态修改为已读，并打开详情-->
<!--                                    <router-link :to="{path:'apply',query:{applyNumber:scope.row.applyNumber}}">-->
                                        <span @click="handleRead(scope.row.applyNumber,scope.$index)">{{scope.row.applyTitle}}</span>
<!--                                    </router-link>-->

                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" width="180"></el-table-column>
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <el-button size="small" @click="handleRead(scope.row.applyNumber,scope.$index)">标为已读</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="handle-row">
<!--                        TODO-->
                        <el-button :disabled="readAll" type="primary" @click="handleAllRead">全部标为已读</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane  :label="`已读消息(${read.length})`" name="second">
                    <template v-if="message === 'second'">
                        <el-table :data="read" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title" @click="openRead(scope.row.applyNumber)">
<!--                                        TODO-->
<!--                                        <router-link to="/apply">-->
                                            {{scope.row.applyTitle}}
<!--                                        </router-link>-->
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button type="danger" @click="handleDel(scope.$index)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button :disabled="delAll" type="danger" @click="handleAllDel">删除全部</el-button>
                        </div>
                    </template>
                </el-tab-pane>
                <el-tab-pane :label="`回收站(${recycle.length})`" name="third">
                    <template v-if="message === 'third'">
                        <el-table :data="recycle" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.applyTitle}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button @click="handleRestore(scope.$index)">还原</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="handle-row">
                            <el-button :disabled="recycleAll" @click="handleAllRestore" type="danger">还原所有消息</el-button>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import store from '../../VueX/store'
    import header from '../common/Header.vue'
    export default {
        name: 'tabs',
        data() {
            return {
                message: 'first',
                showHeader: false,
                unread: [],
                read: [],
                recycle: [],
                readAll:false,
                delAll:false,
                recycleAll:false,
            }
        },
        header,
        created(){
            // 初始化各类消息
            let _this = this;
            _this.getUnread();
            _this.getRead();
            _this.getDel();
        },
        methods: {
            // *****************************以下为初始化**********************************
            // 页面加载后获取所有未读消息
            getUnread:function(){
                // alert(1);
                let _this = this;
                let params = new URLSearchParams();
                params.append('status','未读');
                this.$axios.post('business/getBusinessApply',params,{})
                    .then(
                        function(response) {
                            store.commit('changeMessage',response.data);
                            _this.unread = response.data;
                            if (_this.unread.length === 0){
                                _this.readAll = true;
                            }else{
                                _this.readAll = false;
                            }
                        }
                    ).catch(function (error) {
                    console.log("出错："+error);
                })
            },
            // 页面加载后获取所有已读消息/（未处理的消息）
            getRead:function(){
                let _this = this;
                let params = new URLSearchParams();
                params.append('status','已读');
                this.$axios.post('business/getBusinessApply',params,{})
                    .then(
                        function(response) {
                            // store.commit('changeMessage',response.data);
                            _this.read = response.data;
                            if (_this.read.length === 0){
                                _this.delAll = true;
                            }else{
                                _this.delAll = false;
                            }
                        }
                    ).catch(function (error) {
                    console.log("出错："+error);
                })
            },
            // 页面加载后获取所有删除的消息
            getDel:function(){
                let _this = this;
                let params = new URLSearchParams();
                params.append('status','删除');
                this.$axios.post('business/getBusinessApply',params,{})
                    .then(
                        function(response) {
                            // store.commit('changeMessage',response.data);
                            _this.recycle = response.data;
                            if (_this.recycle.length === 0){
                                // alert(1);
                                _this.recycleAll = true;
                            }else{
                                // alert(2);
                                _this.recycleAll = false;
                            }
                        }
                    ).catch(function (error) {
                    console.log("出错："+error);
                })
            },
            // ***********************************以上为初始化*************************************
            // 将未读消息转为已读消息
            handleRead(applyNumber,index) {
                let _this = this;
                let tmp = applyNumber;
                // alert("参数："+applyNUmber);
                // 处理参数
                let params = new URLSearchParams();
                params.append('applyNumber',this.unread[index].applyNumber);
                params.append('applyStatus','已读');

                // 将后端的已读消息减一
                this.$axios.post('business/handleStatus',params,{}).then(
                    function(response){
                        store.commit('changeMessage',response);
                        console.log("post('business/handleStatus')成功："+response);

                        // 执行更新已读未读删除消息查询
                        _this.getUnread();
                        _this.getRead();
                        _this.getDel();
                        // if (_this.unread.length == 0){
                        //     _this.readAll = true;
                        // }
                        // 未读消息被点击后，修改数据库状态为已读
                        _this.openVn("成功标记为已读，可在【已读消息】中查看哦(*^__^*) ");
                        _this.$router.push({path:'/apply',query:{'applyNumber':tmp}});
                        header.methods.handleMessage();
                    }
                ).catch(function(erro){
                    console.log("post('business/handleStatus')出错："+erro);
                });
                // 修改vuex中的未读消息
                // console.log("即将修改vuex中的数据");
                // store.commit('handleRead',index);
            },
            // 全部标记为已读
            handleAllRead(){
                let _this = this;

                // 将当前所有的未读消息全部转为已读
                let unread2read = _this.unread;
                for (let i = 0; i < unread2read.length; i++) {
                    let params = new URLSearchParams();
                    params.append('applyNumber',unread2read[i].applyNumber);
                    params.append('applyStatus','已读');
                    this.$axios.post('business/handleStatus',params, {}).then(function (response) {
                        console.log("全部标记已读成功："+response);
                        // 执行消息初始化
                        _this.getUnread();
                        _this.getRead();
                        _this.getDel();
                    }).catch(function (erro) {
                        console.log("全部标记为已读失败："+erro);
                    })
                }
                _this.readAll = true;
                _this.openVn("成功标记为已读，可在【已读消息】中查看哦(*^__^*) ");
            },
            // findRead(){
            //     let _this = this;
            //     this.$axios.get('business/getRead').then(function (response) {
            //         console.log("获取所有已读消息成功："+response);
            //         _this.read = response.data;
            //         if (_this.read.length == 0){
            //             _this.delAll = true;
            //         }
            //     }).catch(function(erro){
            //         console.log("获取所有已读消息失败："+erro)
            //     })
            // },
            // 处理删除全部消息
            handleAllDel(){
                // 将当前所有的未读消息全部转为删除
                let _this = this;
                let read2recycle = _this.read;
                for (let i = 0; i < read2recycle.length; i++) {
                    let params = new URLSearchParams();
                    params.append('applyNumber',read2recycle[i].applyNumber);
                    params.append('applyStatus','删除');
                    this.$axios.post('business/handleStatus',params, {}).then(function (response) {
                        console.log("标记已读成功："+response);
                    }).catch(function (erro) {
                        console.log("全部标记为已读失败："+erro);
                    })
                }
                // 执行消息初始化
                _this.getUnread();
                _this.getRead();
                _this.getDel();
                _this.openVn("成功删除所有已读消息，可在【回收站】中恢复哦(*^__^*)");
            },
            // 处理删除单个消息
            handleDel(index) {
                let _this = this;
                console.log("this.read[0].applyNumber:"+_this.read[index]);
                // 定义URLSearchParams处理post参数
                let params = new URLSearchParams();
                params.append('applyNumber',_this.read[index].applyNumber);
                params.append('applyStatus','删除');
                this.$axios.post('business/handleStatus',params, {}).then(function (response) {
                    console.log("删除消息成功："+response);
                    // 执行消息初始化
                    _this.getUnread();
                    _this.getRead();
                    _this.getDel();
                    _this.openVn("删除成功，可在【回收站】中恢复哦(*^__^*)");
                    // if (_this.read.length == 0){
                    //     _this.delAll = true;
                    // }
                }).catch(function (error) {
                    console.log("删除消息失败："+error);
                });

            },
            // 处理还原消息
            handleRestore(index) {
                let _this = this;
                let params = new URLSearchParams();
                params.append('applyNumber',_this.recycle[index].applyNumber);
                params.append('applyStatus','已读');
                this.$axios.post('business/handleStatus',params, {}).then(function (response) {
                    console.log("还原消息成功："+response);
                    // 后端处理完还原删除状态后，将前端的数据也进行处理
                    // 执行消息初始化
                    _this.getUnread();
                    _this.getRead();
                    _this.getDel();
                    _this.openVn("还原成功，可在【已读消息】中查看哦(*^__^*) ");

                }).catch(function (error) {
                    console.log("删除消息失败："+error);
                });

            },
            // 处理还原所有消息
            handleAllRestore(){
                // 将当前所有的已删除的消息全部转为已读
                let _this = this;
                let recycle2read = _this.recycle;
                for (let i = 0; i < recycle2read.length; i++) {
                    let params = new URLSearchParams();
                    params.append('applyNumber',recycle2read[i].applyNumber);
                    params.append('applyStatus','已读');
                    this.$axios.post('business/handleStatus',params, {}).then(function (response) {
                        console.log("还原删除成功："+response);
                    }).catch(function (erro) {
                        console.log("还原全部失败："+erro);
                    })
                }
                // 执行消息初始化
                _this.getUnread();
                _this.getRead();
                _this.getDel();
                _this.openVn("成功还原已删除消息，可在【已读消息】中查看哦(*^__^*)");
            },
            openRead(applyNumber){
                let _this = this;
                _this.$router.push({path:'/apply',query:{'applyNumber':applyNumber}});
            },
            // 页面操作提示
            openVn(msg) {
                const h = this.$createElement;
                this.$message({
                    message: h('p', null, [
                        h('span', null, msg),
                        h('i', { style: 'color: green' }, '')
                    ])
                });
            },
        },
        computed: {
            unreadNum(){
                return this.unread.length;
            }
        },

    }

</script>

<style>
.message-title{
    cursor: pointer;
}
.handle-row{
    margin-top: 30px;
}
    hovered{
        color: #ffa51c;
    }
</style>

